
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>如何高效管理代码变更 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>如何高效管理代码变更 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">根据文档，使用 Git 进行代码管理时应遵循的四项核心原则是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">应遵循的四项核心原则是：1. 保持提交记录清晰；2. 合理使用分支；3. 避免无意义的合并冲突（如通过 Rebase）；4. 利用 Git Hooks 和 CI/CD 实现自动化流程。</div>
          </div>
          <div class="card-source">来源: 1. 代码变更管理的核心原则</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在 Git Flow 分支管理模型中，`develop` 和 `main` 分支各自的核心职责是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在 Git Flow 模型中，`main` 分支用于存放稳定的生产代码，而 `develop` 是主开发分支，所有新功能都从 `develop` 分支派生出来。</div>
          </div>
          <div class="card-source">来源: 2.1 Git Flow</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">Git Flow 中的 `hotfix` 分支是用来做什么的？它通常从哪个分支创建？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`hotfix` 分支用于紧急修复生产环境出现的问题，它直接从 `main` 分支创建。</div>
          </div>
          <div class="card-source">来源: 2.1 Git Flow</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">与复杂的 Git Flow 相比，GitHub Flow 的工作流程是怎样的？它更适用于哪种开发场景？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">GitHub Flow 的流程是：从 `main` 创建 `feature` 分支开发，完成后提交 Pull Request，代码审核通过后合并回 `main` 并部署。它适用于小型团队或需要快速迭代的敏捷开发。</div>
          </div>
          <div class="card-source">来源: 2.2 GitHub Flow</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">什么是 Trunk-Based Development 模式？它依赖什么技术来控制新功能的发布？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Trunk-Based Development 是一种开发者直接在主干分支（`main`）上开发的模式。它依赖“特性标志”（Feature Flag）来控制新功能的启用和禁用，从而避免分支管理的复杂性。</div>
          </div>
          <div class="card-source">来源: 2.3 Trunk-Based Development</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">实践</div>
          <div class="card-question">文档中提到了哪两条关于 Git 提交（Commit）的最佳实践？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">实践</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 原子性提交（Atomic Commits）：确保每个提交都包含一个独立且完整的功能。2. 有意义的提交信息：遵循 `类型: 描述` 的格式，例如 `feat: 增加用户登录功能`。</div>
          </div>
          <div class="card-source">来源: 3.1 提交管理（Commit Best Practices）</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">`git rebase` 相对于 `git merge` 的主要优缺点是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`rebase` 的优点是能使提交历史更清晰、呈线性，没有多余的合并提交。缺点是会重写提交历史，可能影响团队协作。而 `merge` 的优点是保留完整的历史记录，缺点是可能产生多余的合并提交。</div>
          </div>
          <div class="card-source">来源: 3.2 Rebase vs Merge</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">实践</div>
          <div class="card-question">根据文档推荐，在团队协作和个人分支开发中，应分别优先选择 `merge` 还是 `rebase`？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">实践</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">推荐在团队协作时使用 `merge`，以避免破坏共享的提交历史；在个人分支上开发时，推荐使用 `rebase` 来保持自己分支的提交历史清晰。</div>
          </div>
          <div class="card-source">来源: 3.2 Rebase vs Merge</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">什么是 Git Hooks？文档以 `pre-commit` hook 为例，它实现了什么功能？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Git Hooks 是一种可以在特定 Git 操作（如提交、推送）前后自动执行脚本的机制。文档中的 `pre-commit` hook 示例用于在代码提交前自动执行代码格式检查，如果检查不通过，则会中断本次提交。</div>
          </div>
          <div class="card-source">来源: 4.1 Git Hooks</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
